<template>
    <el-card>
        <el-form :model="PropertyEditData" :rules="rules" ref="PropertyEditData" label-width="100px" :inline="true">
            <el-form-item label="名称" prop="peopertyName">
                <el-input v-model="PropertyEditData.peopertyName"></el-input>
            </el-form-item>
            <el-form-item label="显示文本" prop="peopertyText">
                <el-input v-model="PropertyEditData.peopertyText"></el-input>
            </el-form-item>
        </el-form>
        <template v-if="choseType">
            <el-table :data="PropertyValue">
                <el-table-column>
                    <template scope="scope">
                        <el-form :inline="true" :model="scope.row.PropertyValueForm">
                            <el-form-item label="值" prop="value" :rules="[
      { required: true, message: '值不能为空', trigger: 'change blur' },
    ]">
                                <el-input v-model="scope.row.PropertyValueForm.value" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="显示文本" prop="text" :rules="[
      { required: true, message: '显示文本不能为空', trigger: 'change blur' },
    ]">
                                    <el-input v-model="scope.row.PropertyValueForm.text" auto-complete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="位置">
                                        <el-input type="number" v-model.number="scope.row.PropertyValueForm.number" auto-complete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="删除选项值" class="hiddenLabel">
                                        <el-button type="danger" size="small" class="el-icon-close" @click="deleteProperty(scope.$index,PropertyValue)"></el-button>
                                    </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <el-col :span="24" style="margin: 10px 0;">
            <el-button type="primary" v-if="choseType">更新商品选项</el-button>
            <el-button type="primary" v-else>添加商品选项</el-button>
            <el-button type="info" v-if="choseType" @click="addProperty">添加选项值</el-button>
            <el-button style="float:right;" @click="returnOptionTypeList">返回</el-button>
        </el-col>
    </el-card>
</template>
<script>
    export default {
        data() {
            return {
                choseType: true,
                PropertyValue: [
                    {
                        PropertyValueForm: {
                            value: 'A',
                            text: '1',
                            number: '0'
                        }
                    },
                    {
                        PropertyValueForm: {
                            value: 'B',
                            text: '2',
                            number: '1'
                        }
                    },
                    {
                        PropertyValueForm: {
                            value: 'C',
                            text: '3',
                            number: '2'
                        }
                    }
                ],
                PropertyEditData: {
                    name: 'origin',
                    text: '产地'
                },
                rules: {
                    peopertyName: [
                        { required: true, message: '请输入名称', trigger: 'change blur' },
                    ],
                    peopertyText: [
                        { required: true, message: '请输入显示文本', trigger: 'change blur' }
                    ],
                },
            }
        },
        methods: {
            returnOptionTypeList() {
                this.$router.push(`/options`);
            },
            addProperty() {
                var newValue = {
                    PropertyValueForm: {
                            value: '',
                            text: '',
                            number: ''
                        }
                }
                this.PropertyValue.push(newValue);
            },
            deleteProperty(index, rows) {
                rows.splice(index, 1);
            }
        }
    }
</script>